<template>
	<view class="container">
		<view class="map_text" v-if="textData.longitude">
			<view @click="cancleAddress" class="cacal">取消</view>
			<view @click="choiceAddress" class="save">确定</view>
		</view>
		<view class="map_container">
			<map :class="['map']" :id="'map'" :longitude="longitude" :latitude="latitude" :scale="14"
				:show-location="true" :markers="markers" @click="handleMarkerTap"></map>
		</view>

		<scroll-view scroll-y class="address-list">
			<view v-show="!isSearch">
				<view class="search">
					<view class="searchBoxNoSearch" @click="handleSearchTap">
						<up-icon name="search" color="#999" size="24"></up-icon>
						<text style="font-size: 24rpx; color: #999;margin-left: 10rpx;"> 搜索地点 </text>
					</view>
				</view>
				<view class="address-list-item" v-for="item in addressList" :key="item.id" @click="sureAddress(item)">
					<view class="leftBox">
						<view class="imgBox">
							<image v-if="activeId == item.id" src="../../../static/map/select@2x.png" class="img">
							</image>
							<image v-if="activeId != item.id" src="../../../static/map/noSelect@2x.png" class="img">
							</image>
						</view>
						<view>
							<text class="tip-titile">{{ item.name }}</text>
							<text class="tip-address">{{ item.address }}</text>
						</view>
					</view>
					<view>
						<text class="tip-distans">{{ (+item.distance).toFixed(0) }}m</text>
					</view>
				</view>
			</view>
			<view v-show="isSearch">
				<view class="search">
					<view class="searchBox">
						<input type="text" v-model="searchKey" @change="handelSearch" placeholder="请输入搜索内容"
							style="font-size: 24rpx; color: #999;margin-left: 18rpx;width: 80%;" />
						<text style="padding-right: 18rpx;color: #999;font-size: 24rpx;margin-right: 28rpx;"
							@click="handelCancel">取消</text>
					</view>
				</view>
				<view class="address-list-item" v-for="item in searchAddressList" :key="item.id"
					@click="sureAddress(item)">
					<view class="leftBox">
						<view class="imgBox">
							<image v-if="activeId == item.id" src="../../../static/map/select@2x.png" class="img">
							</image>
							<image v-if="activeId != item.id" src="../../../static/map/noSelect@2x.png" class="img">
							</image>
						</view>
						<view>
							<text class="tip-titile">{{ item.name }}</text>
							<text class="tip-address">{{ item.address }}</text>
						</view>
					</view>
					<view>
						<text class="tip-distans"></text>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-modal :show="show" :title="''" @confirm="show = false">
			<view class="slot-content info">
				用户已拒绝获取当前位置，若想获取当前位置请前往设置开启或删除小程序并重新打开！
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as amapFile from './amap-wx.130.js'; //主包中没用到的js  应放到分包里
	const longitude = ref(null); // 经度
	const latitude = ref(null); // 纬度
	const markers = ref([]); // 标记点
	const myAmapFun = ref(null);
	const key = ref('d15fa666ca904b5e958a3a631b5119d6'); // 高德地图key
	const addressList = ref([]); // 周边列表
	const searchAddressList = ref([]); // 搜索返回的周边列表
	const activeId = ref(-1); // 当前选中的周边id
	const isSearch = ref(false); // 是否搜索状态
	const searchKey = ref(''); // 用户搜索的内容
	let throttleTimer = null; // 定时器编号
	const textData = ref({
		latitude: '', // 纬度
		longitude: '', // 经度
		name: ''
	});
	const show = ref(false)
	onMounted(() => {
		myAmapFun.value = new amapFile.AMapWX({
			key: key.value
		});
		getRegeo(true);
	});
	// 获取地址描述信息
	const getRegeo = (isUseResAddress) => {
		let location = null;
		if (longitude.value != null && latitude.value != null) {
			location = longitude.value + ',' + latitude.value;
		}

		myAmapFun.value.getRegeo({
			iconPath: 'https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/dingwei.png',
			iconWidth: 32,
			iconHeight: 32,
			location: location,
			success: (data) => {
				// console.log('成功的数据获取到当前位置', data[0].regeocodeData,data);
				addressList.value = data[0].regeocodeData.pois;
				console.log(addressList.value)
				if (isUseResAddress) {
					latitude.value = data[0].latitude;
					longitude.value = data[0].longitude;
				}
			},
			fail: function(info) {
				show.value = true
			},
		});
	};

	// 用户点击地图
	const handleMarkerTap = (ev) => {
		console.log(ev)
		latitude.value = ev.detail.latitude;
		longitude.value = ev.detail.longitude;
		// 更改标记点
		markers.value = [{
			id: 1,
			latitude: ev.detail.latitude,
			longitude: ev.detail.longitude,
			iconPath: 'https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/dingwei.png',
			width: 32, //宽
			height: 32 //高
		}, ];
		getRegeo();
	};

	// 用户点击下方列表选项
	const sureAddress = (ev, type) => {
		console.log(ev)
		activeId.value = ev.id;
		const [longitudeStr, latitudeStr] = ev.location.split(',');
		longitude.value = parseFloat(longitudeStr); // 将字符串转换为浮点数
		latitude.value = parseFloat(latitudeStr);
		textData.value.latitude = latitude.value
		textData.value.longitude = longitude.value
		textData.value.name = ev.name
		markers.value = [{
			id: 1,
			latitude: latitude.value, // 正确地使用了latitude变量
			longitude: longitude.value, // 正确地使用了longitude变量
			iconPath: 'https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/dingwei.png',
			width: 32, //宽
			height: 32 //高
		}, ];
	};
	// 用户点击搜索按钮
	const handleSearchTap = () => {
		searchKey.value = ''; // 清空搜索内容
		searchAddressList.value = []; // 清空搜索列表
		isSearch.value = true;
	};
	// 用户点击取消按钮（搜索列表页）
	const handelCancel = () => {
		searchKey.value = ''; // 清空搜索内容
		searchAddressList.value = []; // 清空搜索列表
		isSearch.value = false;
	};
	// 用户搜索内容
	const handelSearch = (ev) => {
		if (throttleTimer) {
			clearTimeout(throttleTimer);
		}
		throttleTimer = setTimeout(() => {
			// 只有输入框内有值的时候才会搜索
			if (searchKey.value) {
				//自己构造方法 通过输入的名字 获取到周边
				myAmapFun.value.getGeo1({
					keywords: searchKey.value,
					success: (data) => {
						if (data.pois.length == 0) {
							uni.showModal({
								title: '提示',
								content: '没有搜索到结果',
								showCancel: false,
							});
						} else {
							searchAddressList.value = data.pois; // 将搜索回来的数据放在列表中显示
						}
					},
					fail: (data) => {
						console.log('搜索失败', data);
					},
				});
			}
		}, 500);
	};
	// 用户选择了位置
	const choiceAddress = async () => {
		uni.setStorageSync('location', textData.value.longitude + ',' + textData.value.latitude)
		uni.setStorageSync('locationName', textData.value.name)
		uni.setStorageSync('isSave', 1)
		uni.navigateBack();
	};
	//用户点击了取消
	const cancleAddress = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	:deep(.uni-easyinput__placeholder-class) {
		background-color: red !important;
	}

	.info {
		font-size: 24rpx;
		color: #666;
	}

	.container {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.map_container {
		width: 100%;
		// height: 786rpx;
		height: 800rpx;
		position: relative;
		top: 0;
		bottom: 80px;
		/* 底部留出的空间 */
		left: 0;
	}

	.map {
		width: 100%;
		// height: 786rpx;
		/* 计算总的高度，减去底部空间，然后取45% */
		height: 800rpx;
	}

	.map_text {
		// height: 312rpx;
		// background: linear-gradient( 180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// background: #fff;
		padding: 40rpx 36rpx 0;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 9999;
		width: calc(100% - 36rpx * 2);
		justify-content: space-between;

		.save {
			width: 100rpx;
			height: 58rpx;
			line-height: 58rpx;
			background: #D0A564;
			text-align: center;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			color: #fff;
		}

		.cacal {
			width: 100rpx;
			height: 58rpx;
			line-height: 58rpx;
			background: #AEAEAE;
			text-align: center;
			color: #fff;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}

	text {
		margin: 5px 0;
		display: block;
		font-size: 12px;
	}

	.address-list {
		position: relative;
		top: auto;
		/* 移除绝对定位 */
		bottom: auto;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 0rpx 30rpx;
		width: calc(100% - 30rpx * 2);
		/* 同样计算剩余的高度，取剩下的45% */
		height: calc(100vh - 800rpx);
		overflow-y: auto;

		/* 添加滚动条 */
		.address-list-item {
			width: calc(100% - 1px);
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 27rpx 0 27rpx;

			.leftBox {
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.tip-titile {
				font-size: 30rpx;
				color: #000;
				font-weight: 400;
			}

			.tip-distans {
				width: 20%;
				text-align: left;
				font-size: 28rpx;
				color: #999;
			}

			.imgBox {
				width: 30rpx;
				margin-right: 16rpx;

				.img {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.tip-address {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.search {
		width: calc(100% - 1px);
		padding: 34rpx 1px 0;

		.searchBoxNoSearch {
			height: 60rpx;
			width: calc(100% - 1px);
			background-color: #f2f2f2;
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			border-radius: 6rpx;
			padding-left: 18rpx;
		}

		.searchBox {
			height: 60rpx;
			width: calc(100% - 1px);
			background-color: #f2f2f2;
			padding: 10rpx 18rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 6rpx;
		}

		.searchInput {
			height: 45rpx;
			padding: 8px 15px;
			outline: none;
			border: 1px solid #d3d3d3;
			border-radius: 5px;
			background-color: #ebebeb;
			margin-top: 10px;
		}
	}
</style>